<template>
  <div class="manager_manual">
    <section class="manager_manual_header">
      <a-card>
        <a-form name="advanced_search" autocomplete="off" ref="searchFormRef" class="ant-advanced-search-form"
          :model="searchFormState">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item name="title" label="标题">
                <a-input v-model:value="searchFormState.title" placeholder="请输入标题" allowClear />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item name="brief" label="植物简介">
                <a-input v-model:value="searchFormState.brief" placeholder="请输入植物简介" allowClear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" style="text-align: right">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin: 0 8px" @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </section>
    <section class="manager_manual_content">
      <a-card style="height: 100%">
        <a-row>
          <a-col :span="24">
            <a-button type="primary" @click="handleAdd">新增植物手册</a-button>
          </a-col>
        </a-row>
        <a-row style="margin-top: 8px;">
          <a-col :span="24">
            <a-table :dataSource="dataSource" :columns="columns" size="small" :pagination="false" :scroll="{ x: 1000 }">

              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'cover'">
                  <a-image :src="`/api${record.cover}`" :width="100" :height="60" v-if="record?.cover" />
                </template>
                <a-space v-if="column.dataIndex === 'operation'">
                  <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                  <a-popconfirm title="确定要删除这条数据吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)">
                    <a-button type="link" danger>删除</a-button>
                  </a-popconfirm>

                </a-space>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>
    </section>
    <footer class="manager_manual_footer">
      <a-card style="height: 100%;">
        <a-row align="middle">
          <a-col :span="24">
            <a-pagination :total="total" v-model:current="current" v-model:pageSize="pageSize" :showSizeChanger="true"
              showQuickJumper :show-total="total => `共 ${total} 条数据`" @change="onPageChange" />
          </a-col>
        </a-row>
      </a-card>
    </footer>
    <a-modal v-model:open="open" :title="title" @ok="handleOk" :confirm-loading="confirmLoading" :destroyOnClose="true"
      centered :maskClosable="false">

      <a-form :ref="formRef" :model="formState" autocomplete="off" v-bind="layout">
        <a-form-item label="植物图片" name="cover">
          <SingleImageUploader name="cover" :defaultUrl="formState.cover ? `/api${formState.cover}` : null"
            @upload-success="(filePath) => {
              formState.cover = `${filePath}`;
            }" />
        </a-form-item>
        <a-form-item label="标题" name="title">
          <a-input v-model:value="formState.title" allowClear :maxlength="20" showCount   placeholder="请输入标题"/>
        </a-form-item>
        <a-form-item label="简介" name="brief">
          <a-textarea v-model:value="formState.brief" :auto-size="{ minRows: 2, maxRows: 5 }" allowClear placeholder="请输入简介" />
        </a-form-item>
        <a-form-item label="光照" name="light">
          <a-input v-model:value="formState.light" allowClear placeholder="请输入光照"/>
        </a-form-item>
        <a-form-item label="浇水" name="watering">
          <a-input v-model:value="formState.watering" allowClear placeholder="请输入浇水"/>
        </a-form-item>
        <a-form-item label="土壤" name="soil">
          <a-input v-model:value="formState.soil" allowClear placeholder="请输入土壤"/>
        </a-form-item>
        <a-form-item label="施肥" name="fertilizer">
          <a-input v-model:value="formState.fertilizer" allowClear placeholder="请输入施肥"/>
        </a-form-item>
        <a-form-item label="温度" name="temperature">
          <a-input v-model:value="formState.temperature" allowClear placeholder="请输入温度"/>
        </a-form-item>
        <a-form-item label="湿度" name="humidity">
          <a-input v-model:value="formState.humidity" allowClear placeholder="请输入湿度"/>
        </a-form-item>
        <a-form-item label="生长空间" name="space">
          <a-input v-model:value="formState.space" allowClear placeholder="请输入生长空间"/>
        </a-form-item>
        <a-form-item label="生长周期" name="growthCycle">
          <a-input v-model:value="formState.growthCycle" allowClear placeholder="请输入生长周期"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {message} from 'ant-design-vue';
import SingleImageUploader from '@/components/common/SingleImageUploader/index.vue';
import { getManualList, addManual, editManual, deleteManual } from '@/apis/manual';

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};
const searchFormRef = ref();
const formRef = ref();
const dataSource = ref([]);
const searchFormState = ref({
  title: "",
  brief:"",
});
const formState = ref({
  id:"",
  title:"",
  brief:"",
  light:"",
  watering:"",
  soil:"",
  fertilizer:"",
  temperature:"",
  humidity:"",
  space:"",
  growthCycle:"",
  cover:null
});

const current = ref(1);
const total = ref(0);
const pageSize = ref(10);
const handleSearch = async () => {
  try {
    const { data={} } = await getManualList({
      pageNum: current.value,
      pageSize: pageSize.value,
      title: searchFormState.value.title,
      brief: searchFormState.value.brief,
    });
    dataSource.value = data?.list;
    total.value = data?.total;
  } catch (error) {
    console.log(error, 'get-manual-list-error');
  }

};
const open = ref(false);
const title = ref('');
const confirmLoading = ref(false);
let handleType = '';

const handleAdd = () => {
  open.value = true;
  title.value = '新增植物手册';
  handleType = 'add';
  formState.value = {};

};
const handleEdit = (record) => {

  formState.value = record;
  open.value = true;
  title.value = '编辑植物手册';
  handleType = 'edit';
};

const handleDelete = async (id) => {
  await deleteManual(id);
  init();
  message.success('操作成功');
};
const handleOk = async () => {
  confirmLoading.value = true;
  if (handleType === 'add') {
    await addManual({
      ...formState.value,
    });
  } else {
    await editManual({
      ...formState.value,
    });
  }
  init();
  message.success('操作成功');
  open.value = false;
  confirmLoading.value = false;
  title.value = '';
};
const onPageChange = (page, Size) => {
  current.value = page;
  pageSize.value = Size;
  init();
};

const handleReset = () => {
  searchFormRef.value?.resetFields();
  init();
};
const init = async () => {
  try {
    const {data={}} = await getManualList({
      pageNum: current.value,
      pageSize: pageSize.value,
    });
    dataSource.value = data?.list;
    total.value = data?.total;
  } catch (error) {
    console.log(error, 'get-manual-list-error');
  }
};

onMounted(() => {
  init();
});


const columns = [
  {
    title: '植物图片',
    dataIndex: 'cover',
    width: 160,
    align: 'center',
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: 160,
    align: 'center',
  },
  {
    title: '植物简介',
    dataIndex: 'brief',
    width: 160,
    align: 'center',
  },
  {
    title: '光照',
    dataIndex: 'light',
    width: 140,
    align: 'center'
  },
  {
    title: '浇水',
    dataIndex: 'watering',
    width: 120,
    align: 'center'
  },
  {
    title: '土壤',
    dataIndex: 'soil',
    width: 140,
    align: 'center'
  },
  {
    title: '施肥',
    dataIndex: 'fertilizer',
    width: 140,
    align: 'center'
  },
  {
    title: '温度',
    dataIndex: 'temperature',
    width: 100,
    align: 'center'
  },
  {
    title: '湿度',
    dataIndex: 'humidity',
    width: 100,
    align: 'center'
  },
  {
    title: '生长空间',
    dataIndex: 'space',
    width: 160,
    align: 'center',
    ellipsis:true
  },
  {
    title: '生长周期',
    dataIndex: 'growthCycle',
    width: 160,
    align: 'center',
    ellipsis:true
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 130,
    align: 'center'
  },
]
</script>

<style lang="less" scoped>
.manager_manual {
  box-sizing: border-box;
  padding: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;

  &_header {
    width: 100%;
    max-height: 200px;
  }

  &_content {
    margin-top: 8px;
    flex: 1;
    overflow: auto;
  }

  &_footer {
    margin-top: 8px;
    height: 80px;
  }
}
</style>
